<%--
  Created by IntelliJ IDEA.
  User: hzy
  Date: 2020/1/4
  Time: 13:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册</title>
</head>

<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
    body{
        background: #5bc0de url("img/bjt2.jpg") no-repeat;
        background-size: 100% 100%;
        background-attachment: fixed;
    }
    .box{
        position: absolute;

        top: 20%;
        left: 68%;

        width: 405px;

        height: 497px;

        background-color:
                #e9f0f487;

        opacity: 0.8;

        margin: 0 auto;

        box-shadow: -11px 12px 5px
        #666363;

        text-align: center;

        border-radius: 10%;
    }
    .input-group{
        width: 85%;
        height: 40px;
        margin: 12px auto;
    }
    .form-control{
        height: 40px;
        border-radius: 5%;
    }
    .phoneinfo{
        color: rgb(201,22,35);
        margin: 0;
        padding: 0;
    }
    .input-group-addon{
        color: #000;
        border-radius: 20%;
    }
    .zca{
        color: #8c8c8c;position: relative;top: 10px;
    }
    .zca :hover{
        color: #ff6700;
    }
</style>
<body>
<div id="app">
    <div class="alert alert-success alert-dismissible yzmtf" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <strong>您的验证码是:</strong><span class="dxyzm"></span>-----------注意：关闭需要刷新页面重新获取!
    </div>
    <div class="box">
        <div class="page-header">
            <h1 style="text-align: center;"><b>注册页面</b></h1>
        </div>
        <div class="formbox">
            <form>
                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon0">手机号</span>
                    <input type="text" class="form-control phone" name="phone" placeholder="Phone" aria-describedby="basic-addon0">
                </div>
                <span class="phoneinfo">手机号格式错误?请输入正确的手机号!</span>
                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon1">用户名</span>
                    <input type="text" class="form-control" maxlength="8" minlength="3" name="username" placeholder="用户名3~6位" aria-describedby="basic-addon1">
                </div>
                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon2">密码</span>
                    <input type="password" class="form-control" maxlength="12" minlength="6" name="password" placeholder="密码6~12位" aria-describedby="basic-addon2">
                </div>
                <div class="input-group">
                    <input style="float:left" type="text" class="form-control" name="yzm" placeholder="请输入验证码" aria-describedby="basic-addon3">
                    <span class="input-group-addon" id="basic-addon3" style="padding: 0">  <a href='javascript:reloadyzm()'><img src="yzm.jsp" class="yzm"></a></span>
                </div>
                <div class="input-group">
                    <input style="float:left" type="text" class="form-control" name="dxyzm" placeholder="请输入短信验证码" aria-describedby="basic-addon4">
                    <span class="input-group-addon" id="basic-addon4" style="padding: 0"><a class="btn btn-default hqbtn" onclick="hq()" style="color: rgb(201,22,35);">获取验证码</a></span>
                </div>
                <div class="btndw" style="margin-top: 40px;">
                    <input type="button" onclick="sub()" class="btn btn-default btn-warning" style="width: 180px;" value="注册"><a href="index.jsp" class="zca">已有账号?去登录!</a>
                </div>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script>
    $(".phoneinfo").css("display","none");
    $(".yzmtf").css("display","none");
    window.dxyzm="";
    function reloadyzm(){
        $('.yzm').attr("src","yzm.jsp?time="+(new Date().getTime()));
    }
    function hq() {
            // $.post("ajaxServlet").then(function(res){
            //     console.log(res);
            //     $(".dxyzm").html(res);
            // })
        if((/^1[2345678]\d{9}$/).test($(".phone").val())) {
            $('.yzmtf').css("display","block");
            $('.hqbtn').attr("disabled","disabled");
            $('.hqbtn').css("pointer-events","none");
            $(".phoneinfo").css("display","none");
            // $.post("ajaxServlet").then(function (res) {
            //     console.log(res);
            //     $(".dxyzm").val(res);
            //    window.dxyzm=res;
            // });
            $(".dxyzm").load(
                "ajaxServlet",
                function (res) {
                    console.log(res);
                    window.dxyzm=res;
                }
            )
        }else{
            $(".phoneinfo").css("display","block");
        }
    }
    function sub(){
        var phone=$("input[name='phone']").val();
        var username=$("input[name='username']").val();
        var password=$("input[name='password']").val();
        var yzm=$("input[name='yzm']").val();
        var dxyzm=$("input[name='dxyzm']").val();
        var checkcode="";
        if(phone!=""&&username!=""&&password!=""&&yzm!=""&&dxyzm!=""){
        if(username.length>=3&&password.length>=6){
            $.ajax({
                url:"regServlet",
                data:"",
                type:"post",
                success:function(data) {
                    var index=data.indexOf(":");
                    checkcode+=data.substring(index+2,data.length-2);
                    if(yzm.toUpperCase()===checkcode.toUpperCase()){
                        if(window.dxyzm===dxyzm){
                            $.ajax({
                                url:"logonServlet",
                                type: "post",
                                data: {"phone":phone,"username":username,"password":password,"yzm":yzm,"dxyzm":dxyzm},
                                success:function(res){
                                    console.log(
                                        res
                                    )
                                    if(res==="true"){
                                        alert("注册成功！");
                                        window.location.href="index.jsp";
                                    }else if(res==="false"){
                                        alert("注册失败！");
                                    }else{
                                        alert(res);
                                    }
                                },
                                error:function(res){
                                    console.log(res);
                                }
                            })
                        }else{
                            alert("短信验证码不通过")
                        }
                    }else{
                        alert("图片验证码不通过")
                    }
                }
            })}else{
                alert("用户名不能小于3位、超过8位/密码不能小于6位、超过12位！");
            }
        }else{
            alert("请填写所有内容！");
        }
    }
</script>
</body>
</html>
